<template>
  <div style="text-align: right;margin: 10px 0;">
    <el-pagination :current-page.sync="pagination.current_page" :page-size="pagination.per_page" :page-sizes="pageSizes"
      :total="pagination.total" :layout="layout" @size-change="sizeChange" @current-change="currentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'paginationCom',
  data() {
    return {};
  },
  props: {
    pagination: {
      type: Object,
      default: () => {
        return {
          current_page: 1,
          per_page: 10,
          total: 0
        }
      },
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100, 200]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },

  components: {},

  created() { },

  mounted() { },

  beforeDestroy() { },

  methods: {
    sizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    currentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss"></style>
